<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <#include "../common/header.ftl" />
    <link rel="stylesheet" href="/js/plugins/treeview/bootstrap-treeview.min.css" />
    <script type="text/javascript" src="/js/plugins/treeview/bootstrap-treeview.min.js"></script>
</head>
<body>
<!-- 模态框（Modal） -->
<div class="modal fade" id="inputModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">编辑</h4>
            </div>
            <div class="modal-body">
            </div>
            <form class="form-horizontal" action="/region/saveOrUpdate.do" method="post" id="editForm">
                <input type="hidden" name="id">
                <div class="form-group" >
                    <label for="name" class="col-sm-4 control-label">名称：</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="name" name="name" placeholder="请输入地区名称">
                    </div>
                </div>

                <div class="form-group">
                    <label for="sn" class="col-sm-4 control-label">上级地区：</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="parent.name" readonly>
                        <input type="hidden" class="form-control" name="parent.id">
                        <input type="hidden" class="form-control" name="state">
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary submitButton">保存</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<div class="container " style="margin-top: 20px">
    <#include "../common/top.ftl" />
    <div class="row">
        <div class="col-sm-3">
            <#assign menu="region"/>
            <#include "../common/menu.ftl" />
        </div>
        <div class="col-sm-9">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class="page-head-line">地区管理</h1>
                </div>
            </div>
            <a class="btn btn-success inputBtn">
                <span class="glyphicon glyphicon-plus"></span> 添加
            </a>
            <div class="row">
                <div class="col-md-4" id="treeview">

                </div>
                <div class="col-md-8">
                    <table class="table table-striped table-hover" id="regionTable" >
                        <thead>
                        <tr>
                            <th>编号</th>
                            <th>名称</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>
<#-- 表单模板 -->
<table class="template" style="display: none">
    <tr>
        <td></td>
        <td></td>
        <td>
            <a class="btn btn-info btn-xs btn-input inputBtn" >
                <span class="glyphicon glyphicon-pencil"></span>编辑
            </a>

            <a class="btn btn-danger btn-xs btn-hot recommendBtn" >
                <span class="glyphicon glyphicon-heart"></span> 设为推荐
            </a>
        </td>

    </tr>
</table>

<script>
    $(function () {
        //定义变量接收上级地区名称
        var parentId = null;
        var parentName = "全部地区";
        $.get("/region/selectByParentId.do",function (data) {
            var defaultData = [
                {
                    text: '全部地区',
                    nodes: data
                }
            ];
            $('#treeview').treeview({
                data: defaultData,
                showTags: true,
                //点击加号
                lazyLoad: function (node) {
                    $.get("/region/selectByParentId.do",{parentId:node.id},function (data) {
                        console.log(data);
                        $('#treeview').treeview('addNode', [data, node]);
                    });
                },
                //点击节点
                onNodeSelected: function(event, node) {
                    //给模态框的parent.id赋值
                    //$("#inputModal input[name='parent.id']").val(node.id);
                    //赋值给上级地区变量parentName
                    parentId = node.id;
                    parentName = node.name;
                    //清空表单的内容
                    $("#regionTable tbody").html("");
                    $.get("/region/selectByParentId.do",{parentId:node.id,flag:true},function (data) {
                        $.each(data,function (index,ele) {
                            var tr = $(".template tr").clone(true);
                            $(tr).find("td:nth-child(1)").html(index+1);
                            $(tr).find("td:nth-child(2)").html(ele.name);
                            $(tr).find("a").attr("data-json",ele.json);
                            //判断状态是否为推荐,是,则设置按钮为取消推荐;否则,设置为设为推荐;
                            if (ele.state == 1) {
                                $(tr).find("a:nth-child(2)").html("<span class=\"glyphicon glyphicon-heart\"></span> 取消推荐");
                            }
                            $("#regionTable tbody").append(tr);
                        })
                    })
                }
            })
        });
        //编辑/添加按钮添加模态框事件
        $(".inputBtn").click(function () {
            //清空模态框
            $("#inputModal input").val("");
            //给模态框中的上级地区赋值
            if (!parentId) {
                $("#inputModal input[name='parent.name']").val("全部地区");
            }else{
                $("#inputModal input[name='parent.name']").val(parentName);
            }
            $("#inputModal input[name='parent.id']").val(parentId);
            var json = $(this).data("json");
            if (json) {
                $("#inputModal input[name='id']").val(json.id);
                $("#inputModal input[name='name']").val(json.name);
                $("#inputModal input[name='state']").val(json.state);
            }
            $("#inputModal").modal("show");
        });

        //模态框保存按钮绑定点击事件
        $(".submitButton").click(function () {
            $("#editForm").ajaxSubmit(function () {
                reload();
            });
        });

        //点击推荐按钮
        $(".recommendBtn").click(function () {
            var json = $(this).data("json");
            if (json.state == 1) {
                $.get("/region/updateStateById.do",{"id":json.id,"state":0},function (data) {
                    location.reload();
                });
            }else {
                $.get("/region/updateStateById.do",{"id":json.id,"state":1},function (data) {
                    location.reload();
                });
            }
        });
    })
</script>
</body>
</html>